<template>
  <div>
    <div class="head_search">
      <!-- 头部栏 -->
      <van-nav-bar title="当前城市">
        <template #left>
          <van-icon name="cross" color="#191a1b" size="23px" @click="comeback" />
        </template>
      </van-nav-bar>

      <!-- 搜索框 -->
      <van-search v-model="searchValue" background="#f4f4f4" :show-action="true" placeholder="请输入搜索关键词"/>
    </div>

    <!-- 城市列表 -->
    <div class="city_list">
      <van-index-bar :sticky="false" :index-list="cityList | cityFilter" @select="handleSelect">
      <!-- <van-index-bar :index-list="computedCityList" @select="handleSelect"> -->
        <div v-for="data in cityList" :key="data.type">
          <van-index-anchor :index="data.type" />
          <van-cell :title="item.name" v-for="item in data.list" :key="item.cityId" @click="handleChangeCity(item.cityId, item.name)" />
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import http from '@/util/http.js'
import Vue from 'vue'
import { mapMutations } from 'vuex'
import { IndexBar, IndexAnchor, Cell, Toast, Icon, Search } from 'vant'

Vue.use(IndexBar).use(IndexAnchor).use(Cell).use(Toast).use(Icon).use(Search)

Vue.filter('cityFilter', (city) => {
  // 因为forEach对return无效，所以需要一个新的数组来存放数据
  // 而map方法，可以直接把数组里面的对象「映射」出来，直接通过返回即可
  // return city.map(item => item.type)
  var newLetter = []
  city.forEach(item => {
    newLetter.push(item.type)
  })
  return newLetter
})

export default {
  data () {
    return {
      cityList: [],
      // 搜索框的值
      searchValue: ''
    }
  },
  computed: {
    computedCityList () {
      return this.cityList.map(item => item.type)
    }
  },
  mounted () {
    http({
      method: 'get',
      url: '/gateway?k=6469044',
      headers: {
        'X-Host': 'mall.film-ticket.city.list'
      }
    }).then(res => {
      // console.log(res.data.data)
      this.cityList = this.handleCityData(res.data.data.cities)
    })
  },
  methods: {
    handleCityData (data) {
      const letterArr = []
      const newCityList = []
      for (let i = 65; i < 91; i++) {
        letterArr.push(String.fromCharCode(i))
      }

      // 遍历A-Z，通过过滤器过滤出数据
      letterArr.forEach(letter => {
        // 把首字母截出来
        const list = data.filter((item) => item.pinyin.substr(0, 1).toUpperCase() === letter)
        // 收集数组长度大于0的城市
        // 并且转换格式为 { type: A, list:[{},{},{}] }
        if (list.length > 0) {
          newCityList.push({
            type: letter,
            list: list
          })
        }
      })
      // 返回数据给ajax
      return newCityList
    },

    handleSelect (index) {
      Toast(index)
    },

    handleChangeCity (id, name) {
      // 做状态集中管理，需要记录下城市的id和城市的名字 --- 这里做修改
      // 但是直接修改，会有安全问题，需要做一个监听
      // this.$store.state.cityId = id
      // this.$store.state.cityName = name

      // 也就是说把说有的修改都集中在store中修改
      // this.$store.commit('changeCityName', name)
      // this.$store.commit('changeCityId', id)

      // 直接改为
      this.changeCityName(name)
      this.changeCityId(id)

      this.$router.back()
    },

    comeback () {
      // 按钮返回城市列表页面
      this.$router.back()
    },

    ...mapMutations('CityModule', ['changeCityName', 'changeCityId'])
  }
}
</script>

<style lang="scss" scoped>
  .van-toast--text {
    min-width: 40px;
  }
  .van-search__content {
    background-color: #fff;
  }
  // 城市列表
  .city_list {
    padding: 100px 0 0 0;
  }
  // 头部和搜索框
  .head_search {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    z-index: 300;
  }
</style>
